<template>
<div>
    <h1>HOOKS</h1>
    <img id="img" width="300" height="300" :src="imgUrl" alt="显示错误">
    <button @click="cutImgUrl">切换图片</button>
    <p>{{str}}</p>

</div>
</template>
<script lang='ts' setup>
import {ref,reactive} from "vue"
import useBase64 from './hooks'
let imgUrl = ref('')
let str = ref('');
let num = ref<number>(1)

// 解决require直接报错  
const cutImgUrl = async ()=>{
    console.log(num.value)
    let m = await import(`@/assets/img/2.jpg`)
    if( num.value++ >= 4){
        num.value = 1
    }
    imgUrl.value = `/src/assets/img/${num.value}.jpg`
    cut()
}

const cut =  ()=>{
  useBase64({el:'#img'}).then(res=>{
      str.value =  res.baseUrl
    console.log(res.baseUrl);
    })
}
    
</script>
<style lang='less' scoped>
</style>